﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>折叠菜单</title>
		<link rel="stylesheet" href="collapsemenu.css" />
	</head>

	<body>
		<div id="fold">
			<ul>
				<li>
					<a href="#">信息管理</a>
					<ul class="wrap">
						<li>
							<a href="#">未读信息</a>
						</li>
						<li>
							<a href="#">已读信息</a>
						</li>
						<li>
							<a href="#">信息列表</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">商品管理</a>
					<ul class="wrap">
						<li>
							<a href="#">商品添加</a>
						</li>
						<li>
							<a href="#">商品列表</a>
						</li>
						<li>
							<a href="#">商品分类</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">用户管理</a>
					<ul class="wrap">
						<li>
							<a href="#">权限设置</a>
						</li>
						<li>
							<a href="#">用户列表</a>
						</li>
						<li>
							<a href="#">重置密码</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		
		<script type="text/javascript" src="jquery-1.12.4.min.js" ></script>
		<script>
			/* 1、设置ul的第一个li的.wrap 元素display为block
			   2、ul中li的点击事件：
			          当前li的.wrap元素显示，其他兄弟li的.warp元素隐藏*/
//			$('#fold ul li:first .wrap').css('display','block');
			$('#fold ul li:first').find('.wrap').css('display','block');
			
			/*$('#fold ul li').onclick=function(){
				$(this).find('.wrap').css('display','block');
				$(this).siblings('li').find('.wrap').css('display','block');
			}*/
			$('#fold ul li').click(
				function(){
				//$(this).find('.wrap').css('display','block');
				$(this).find('.wrap').slideToggle(1000);
				$(this).siblings('li').find('.wrap').css('display','none');
				}
			);
			
			
		</script>
		
	</body>

</html>
